<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>抖音风格直播</title>
  <style>
    body, html {
      margin: 0; padding: 0;
      height: 100%; width: 100%;
      font-family: "PingFang SC", "Helvetica Neue", Arial, sans-serif;
      background: #000;
      overflow: hidden;
      color: #fff;
    }
    .container {
      position: relative;
      width: 100%;
      height: 100%;
      background: #000;
    }
    .video-container {
      position: absolute;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
    .video-iframe {
      width: 100%;
      height: 100%;
      object-fit: cover;
      background: #000;
      border: none;
    }
    /* 顶部主播信息 */
    .header {
      position: absolute;
      top: 10px; left: 10px;
      display: flex;
      align-items: center;
      background: rgba(0,0,0,0.5);
      border-radius: 20px;
      padding: 6px 12px;
      color: #fff;
      font-size: 14px;
      z-index: 10;
    }
    .header img {
      width: 32px; height: 32px;
      border-radius: 50%; margin-right: 8px;
      border: 2px solid #fff;
    }
    .follow-btn {
      margin-left: 10px;
      padding: 2px 10px;
      background: #fe2c55;
      border-radius: 12px;
      font-size: 12px;
      border: none;
      color: white;
    }
    /* 右侧功能按钮 */
    .sidebar {
      position: absolute;
      right: 10px; bottom: 25%;
      display: flex;
      flex-direction: column;
      gap: 20px;
      align-items: center;
      z-index: 10;
    }
    .sidebar .action-btn {
      display: flex;
      flex-direction: column;
      align-items: center;
      color: #fff;
      font-size: 12px;
    }
    .sidebar .icon-wrapper {
      width: 48px; height: 48px;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      background: rgba(0,0,0,0.6);
      margin-bottom: 4px;
    }
    .sidebar .icon-wrapper i {
      font-size: 24px;
    }
    .sidebar .action-btn .count {
      margin-top: 2px;
    }
    /* 聊天消息区 */
    .chat-box {
      position: absolute;
      bottom: 120px; left: 10px;
      width: 70%;
      max-height: 30%;
      overflow-y: auto;
      font-size: 14px;
      color: #fff;
      z-index: 10;
    }
    .chat-msg {
      margin: 6px 0;
      padding: 6px 10px;
      background: rgba(0,0,0,0.4);
      border-radius: 4px;
      animation: fadeIn 0.3s;
    }
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .chat-msg span {
      font-weight: bold;
      color: #ff2c55;
      margin-right: 5px;
    }
    .chat-msg .gift {
      color: #ffcd32;
      margin-left: 4px;
    }
    /* 输入框 */
    .chat-input {
      position: absolute;
      bottom: 20px; left: 10px; right: 10px;
      display: flex;
      gap: 8px;
      z-index: 10;
    }
    .chat-input input {
      flex: 1;
      padding: 10px 15px;
      border-radius: 20px;
      border: none;
      font-size: 14px;
      background: rgba(255,255,255,0.2);
      color: #fff;
    }
    .chat-input input::placeholder {
      color: rgba(255,255,255,0.7);
    }
    .chat-input button {
      padding: 10px 18px;
      border-radius: 20px;
      border: none;
      background: linear-gradient(45deg, #ff2c55, #ff2cb4);
      color: #fff;
      font-size: 14px;
      font-weight: bold;
    }
    /* 点赞动效 */
    .like-animation {
      position: absolute;
      z-index: 9;
      pointer-events: none;
      animation: floatUp 1.5s forwards;
    }
    @keyframes floatUp {
      0% { transform: translateY(0) scale(0.5); opacity: 1; }
      100% { transform: translateY(-100px) scale(1.2); opacity: 0; }
    }
  </style>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
<div class="container">
  <!-- 直播视频 - 替换为iframe -->
  <div class="video-container">
    <iframe class="video-iframe" src="about:blank" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
  </div>

  <!-- 主播信息 -->
  <div class="header">
    <img src="https://p3-pc.douyinpic.com/img/tos-cn-avt-0015/65b6d369e58e4a5e877a87b68d6b2b4c~tplv-8yspql9lf9-avt.jpeg?from=2956013662" alt="头像">
    <div>
      <div>抖音小姐姐</div>
      <div style="font-size:12px;color:#ccc;">在线 1.2万</div>
    </div>
    <button class="follow-btn">关注</button>
  </div>

  <!-- 功能按钮 -->
  <div class="sidebar">
    <div class="action-btn">
      <div class="icon-wrapper">
        <i class="fas fa-heart"></i>
      </div>
      <div class="count">12.3万</div>
    </div>
    <div class="action-btn">
      <div class="icon-wrapper">
        <i class="fas fa-comment"></i>
      </div>
      <div class="count">1.2万</div>
    </div>
    <div class="action-btn">
      <div class="icon-wrapper">
        <i class="fas fa-gift"></i>
      </div>
      <div class="count">礼物</div>
    </div>
    <div class="action-btn">
      <div class="icon-wrapper">
        <i class="fas fa-share"></i>
      </div>
      <div class="count">分享</div>
    </div>
  </div>

  <!-- 聊天消息 -->
  <div class="chat-box" id="chatBox">
    <div class="chat-msg"><span>抖音用户1234:</span> 主播好漂亮！</div>
    <div class="chat-msg"><span>小可爱:</span> 这个背景音乐好听 <i class="fas fa-music"></i></div>
    <div class="chat-msg"><span>大哥来了:</span> 送出了 <span class="gift">🎁 火箭</span></div>
    <div class="chat-msg"><span>美食家:</span> 今天播什么内容呀？</div>
  </div>

  <!-- 输入框 -->
  <div class="chat-input">
    <input id="chatInput" type="text" placeholder="说点什么...">
    <button id="btnSend">发送</button>
  </div>

</div>

<script>
  const $ = id => document.getElementById(id);
  let likeCount = 123456;

  // 模拟嵌入抖音视频
  function loadVideo() {
    // 这里可以替换为实际的抖音视频嵌入代码
    const iframe = document.querySelector('.video-iframe');
    // 实际使用时可以替换为抖音视频URL
    // iframe.src = "https://www.douyin.com/video/xxxxxxxx";

    // 添加一个占位背景
    document.querySelector('.video-container').style.background = "linear-gradient(45deg, #8a2387, #e94057, #f27121)";
  }

  // 点赞功能
  document.querySelector('.fa-heart').closest('.icon-wrapper').addEventListener('click', function(e) {
    likeCount++;
    this.closest('.action-btn').querySelector('.count').textContent = (likeCount/10000).toFixed(1) + '万';

    // 创建点赞动画
    const heart = document.createElement('div');
    heart.className = 'like-animation';
    heart.innerHTML = '<i class="fas fa-heart" style="color: #ff2c55; font-size: 24px;"></i>';
    heart.style.left = e.clientX - 12 + 'px';
    heart.style.top = e.clientY - 12 + 'px';
    document.body.appendChild(heart);

    // 移除动画元素
    setTimeout(() => {
      document.body.removeChild(heart);
    }, 1500);
  });

  // 聊天功能
  $("btnSend").addEventListener('click', sendMessage);
  $("chatInput").addEventListener('keypress', function(e) {
    if (e.key === 'Enter') sendMessage();
  });

  function sendMessage() {
    const text = $("chatInput").value.trim();
    if (!text) return;

    const div = document.createElement("div");
    div.className = "chat-msg";
    div.innerHTML = `<span>我：</span>${text}`;
    $("chatBox").appendChild(div);
    $("chatBox").scrollTop = $("chatBox").scrollHeight;
    $("chatInput").value = "";
  }

  // 初始化
  window.addEventListener('load', loadVideo);
</script>
</body>
</html>
